<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="nav_bar">
			<!-- shadow,感觉没效果 -->
			<uni-nav-bar
				shadow
				title="weixin"
				background-color="#fff
			"
				left-icon="more-filled"
				right-icon="plus"
				type="line"
				style="margin-bottom: 3px"
				@clickLeft="toggle('left')"
			></uni-nav-bar>
		</view>
		<!-- windows通知栏 -->
		<view class="tongzhi">
			<image class="tongzhi_logo" src="../../images/windows.png" mode=""></image>
			<view class="tongzhi_xiaoxi">windows微信已登录</view>
		</view>

		<view class="tanchaung">
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text class="text">popup 内容</text></view>
			</uni-popup>
		</view>
		<!-- 消息 -->

		<view class="xiaoxi_content">
			<view class="xiaoxi" id="xiaoxi_first">
				<image class="yonghu_icon" src="../../images/男头像.png" mode=""></image>
				<view class="yonghu_name">阿香</view>
				<view class="yonghu_message">我是一条消息，我很短</view>
			</view>

			<view class="xiaoxi">
				<image class="yonghu_icon" src="../../images/男头像.png" mode=""></image>
				<view class="yonghu_name">翠花</view>
				<view class="yonghu_message">🤔（未读功能开发中）</view>
			</view>
			<view class="xiaoxi">
				<image class="yonghu_icon" src="../../images/头像 女孩.png" mode=""></image>
				<view class="yonghu_name">铁蛋</view>
				<view class="yonghu_message">我是很长消息我是很长消息我是...</view>
			</view>
			<view class="xiaoxi">
				<image class="yonghu_icon" src="../../images/头像 女孩.png" mode=""></image>
				<view class="yonghu_name">铁蛋</view>
				<view class="yonghu_message">我是很长消息我是很长消息我是...</view>
			</view>
			<view class="xiaoxi">
				<image class="yonghu_icon" src="../../images/头像 女孩.png" mode=""></image>
				<view class="yonghu_name">铁蛋</view>
				<view class="yonghu_message">我是很长消息我是很长消息我是...</view>
			</view>
			<view class="xiaoxi" xiaoxi_last>
				<image class="yonghu_icon" src="../../images/头像 女孩.png" mode=""></image>
				<view class="yonghu_name">铁蛋</view>
				<view class="yonghu_message">我是很长消息我是很长消息我是...</view>
			</view>
		</view>
	</view>
</template>

<script>
// export default {
// 	data() {
// 		return {
// 			title: 'Hello'
// 		}
// 	},
// 	onLoad() {

// 	},
// 	methods: {

// 	}
// }
export default {
	data() {
		return {
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			value: ''
		};
	},
	onReady() {},
	methods: {
		change(e) {
			console.log('当前模式：' + e.type + ',状态：' + e.show);
		},
		toggle(type) {
			this.type = type;

			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type);
		},
		messageToggle(type) {
			this.msgType = type;

			this.messageText = `这是一条${type}消息提示`;

			this.$refs.message.open();
		},
		dialogToggle(type) {
			this.msgType = type;
			this.$refs.alertDialog.open();
		},
		dialogConfirm() {
			console.log('点击确认');
			this.messageText = `点击确认了 ${this.msgType} 窗口`;

			this.$refs.message.open();
		},
		inputDialogToggle() {
			this.$refs.inputDialog.open();
		},
		dialogClose() {
			console.log('点击关闭');
		},
		dialogInputConfirm(val) {
			uni.showLoading({
				title: '3秒后会关闭'
			});

			setTimeout(() => {
				uni.hideLoading();
				console.log(val);

				this.value = val;

				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close();
			}, 3000);
		},
		shareToggle() {
			this.$refs.share.open();
		}
	}
};
</script>

<style lang="scss">
// 弹窗样式
@mixin flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}

@mixin height {
	/* #ifndef APP-NVUE */
	height: 100%;
	/* #endif */
	/* #ifdef APP-NVUE */
	flex: 1;
	/* #endif */
}

.box {
	@include flex;
}

.button {
	@include flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 35px;
	margin: 0 5px;
	border-radius: 5px;
}

.example-body {
	background-color: #fff;
	padding: 10px 0;
}

.button-text {
	color: #fff;
	font-size: 12px;
}

.popup-content {
	@include flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	height: 50px;
	background-color: #fff;
}

.popup-height {
	@include height;
	width: 200px;
}

.text {
	font-size: 12px;
	color: #333;
}

.popup-success {
	color: #fff;
	background-color: #e1f3d8;
}

.popup-warn {
	color: #fff;
	background-color: #faecd8;
}

.popup-error {
	color: #fff;
	background-color: #fde2e2;
}

.popup-info {
	color: #fff;
	background-color: #f2f6fc;
}

.success-text {
	color: #09bb07;
}

.warn-text {
	color: #e6a23c;
}

.error-text {
	color: #f56c6c;
}

.info-text {
	color: #909399;
}

.dialog,
.share {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}

.dialog-box {
	padding: 10px;
}

.dialog .button,
.share .button {
	/* #ifndef APP-NVUE */
	width: 100%;
	/* #endif */
	margin: 0;
	margin-top: 10px;
	padding: 3px 0;
	flex: 1;
}

.dialog-text {
	font-size: 14px;
	color: #333;
}
// 消息
.xiaoxi {
	flex-direction: column;
	// background-color: #09bb07;
	border-bottom: 1rpx solid rgb(214, 214, 214);
	// border: 4rpx solid rgb(214, 214, 214);
	width: 100%;
	height: 140rpx;
}
#xiaoxi_first {
	border-top: 1rpx solid rgb(214, 214, 214);
}

.tongzhi {
	display: flex;
}
.tongzhi_logo {
	width: 61rpx;
	height: 61rpx;
	left: 32rpx;
}
.tongzhi_xiaoxi {
	margin-left: 90rpx;
}
.yonghu_icon {
	width: 100rpx;
	height: 100rpx;
	left: 20rpx;
	top: 20rpx;
	// display: flex;
	// align-items: center;
}
.yonghu_message {
	margin-left: 180rpx;
	margin-top: 30rpx;
}
.yonghu_name {
	margin-left: 180rpx;
	margin-top: -100rpx;
}
</style>
